<template>
  <div
    :class="[
      'recharge-item',
      `recharge-item-index-${index+1}`,
      {'recharge-item-red-1': isHighlight && item.corner_style == 1 },
      {'recharge-item-red-2': isHighlight && item.corner_style == 2 },
      {'recharge-item-red-3': isHighlight && item.corner_style == 3 },
      {'recharge-item-red-4': isHighlight && item.corner_style == 4 },
    ]"
    :draggable="true"
    @dragstart="onDragstart(item)"
    @dragenter="onDragenter(item,$event)"
    @dragend="onDragend(item,$event)"
  >
    <template v-if="item.isVip || item.isFullCatalog">
      <!-- 普通会员 -->
      <p
        v-if="item.vip_type === 1"
        class="font-16 font-color font-bold"
        :class="{'color-fff': isHighlight}"
      >{{ item.price }}元/{{ item.type !== 4 ? item.duration : '' }}{{ typeText[item.type] }}会员</p>
      <!-- 剧集会员 -->
      <p
        v-else-if="item.vip_type === 2"
        class="font-16 font-color font-bold"
        :class="{'color-fff': isHighlight}"
      >{{ item.price }}元</p>
      <p class="font-16 font-color-2" :class="{'color-fff': isHighlight}">{{ item.note }}</p>
      <template v-if="item.corner_marker">
        <div class="tag-panel">
          <el-image
            class="tag-back"
            :src="vipRechargeBackImage"
          />
          <div class="tag-small">
            <el-image
              :src="vipTagIconImage"
              style="width: 14px; height: 14px"
            />
            <p class="color-fff font-12 ml-5">{{ item.corner_marker }}</p>
          </div>
        </div>
      </template>
      <div class="vip-big-icon">
        <el-image v-if="vipRechargeIconImage" :src="vipRechargeIconImage" style="width: 100%; height: 100%" />
      </div>
    </template>
    <template v-else-if="item.isVip === false">
      <!-- 金币 -->
      <p class="font-16 font-color font-bold mt-10" :class="{'color-fff': isHighlight }">￥{{ item.price }}元</p>
      <p class="font-16 font-color-2 mt-5" :class="{'color-fff': isHighlight }">{{ item.note }}</p>
      <p
        v-if="item.note_2"
        class="font-16 color-pick mt-5"
        :class="{'color-fff': isHighlight }"
      >{{ item.note_2 }}</p>
      <template v-if="item.corner_marker">
        <div class="tag-panel">
          <el-image
            class="tag-back"
            :src="vipRechargeBackImage"
          />
          <div class="tag-small">
            <el-image
              :src="vipTagIconImage"
              style="width: 14px; height: 14px"
            />
            <p class="color-fff font-12 ml-5">{{ item.corner_marker }}</p>
          </div>
        </div>
      </template>
    </template>
    <template v-if="showAction">
      <div class="btn-panel">
        <div v-hasPermi="['config:template:vipEdit', 'config:template:coinEdit']" class="mr-10">
          <i class="el-icon-edit-outline" @click="handleEdit" />
        </div>
        <div v-hasPermi="['config:template:vipDelete', 'config:template:coinDelete']" class="">
          <i class="el-icon-delete" @click="handleUpdateFlag()" />
        </div>
      </div>
    </template>

  </div>
</template>

<script>
import vipRechargeBack1 from '@/assets/images/vip-recharge-back-1.png'
import vipRechargeBack2 from '@/assets/images/vip-recharge-back-2.png'
import vipRechargeBack3 from '@/assets/images/vip-recharge-back-3.png'
import vipRechargeBack4 from '@/assets/images/vip-recharge-back-4.png'
import vipRechargeBack5 from '@/assets/images/vip-recharge-back-5.png'
import vipRechargeIcon1 from '@/assets/images/vip-recharge-icon-1.png'
import vipRechargeIcon2 from '@/assets/images/vip-recharge-icon-2.png'
import vipRechargeIcon3 from '@/assets/images/vip-recharge-icon-3.png'
import vipRechargeIcon4 from '@/assets/images/vip-recharge-icon-4.png'
import vipTagIcon1 from '@/assets/images/vip-tag-icon-1.png'
import vipTagIcon2 from '@/assets/images/vip-tag-icon-2.png'
import vipTagIcon3 from '@/assets/images/vip-tag-icon-3.png'
import vipTagIcon4 from '@/assets/images/vip-tag-icon-4.png'
import vipTagIcon5 from '@/assets/images/vip-tag-icon-5.png'

/*
* 不理解为什么变量放在data里面，onDragend（）无法监听到dragNewDataId最新值
* */
let dragOldDataId
let dragNewDataId

export default {
  name: 'PriceItem',
  props: {
    showAction: {
      type: Boolean,
      default: true
    },
    // 数据下标
    index: {
      type: Number,
      default: 0
    },
    // 正在渲染的item
    item: {
      type: Object,
      default: () => {}
    },
    // 数据源
    sourceList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      vipRechargeBack1,
      vipRechargeBack2,
      vipRechargeBack3,
      vipRechargeBack4,
      vipRechargeBack5,
      vipRechargeIcon1,
      vipRechargeIcon2,
      vipRechargeIcon3,
      vipRechargeIcon4,
      vipTagIcon1,
      vipTagIcon2,
      vipTagIcon3,
      vipTagIcon4,
      vipTagIcon5,

      typeText: {
        1: '天',
        2: '月',
        3: '年',
        4: '永久'
      }
    }
  },
  computed: {
    vipRechargeBackImage() {
      const { bg_type, corner_bg_style } = this.$props.item
      const item = {
        1: vipRechargeBack1,
        2: vipRechargeBack2,
        3: vipRechargeBack3,
        4: vipRechargeBack4,
        5: vipRechargeBack5
      }
      const result = item[corner_bg_style]
      return result
    },
    vipRechargeIconImage() {
      const { bg_type, corner_style } = this.$props.item
      const item = {
        1: vipRechargeIcon1,
        2: vipRechargeIcon2,
        3: vipRechargeIcon3,
        4: vipRechargeIcon4
      }
      const result = bg_type === 1 ? item[corner_style] : undefined
      return result
    },
    vipTagIconImage() {
      const { bg_type, corner_bg_style } = this.$props.item
      const item = {
        1: vipTagIcon1,
        2: vipTagIcon2,
        3: vipTagIcon3,
        4: vipTagIcon4,
        5: vipTagIcon5
      }
      const result = item[corner_bg_style]
      return result
    },
    // true高亮
    isHighlight() {
      const { bg_type } = this.$props.item
      return bg_type === 1
    }

  },
  methods: {
    handleEdit() {
      this.$emit('edit')
    },
    handleUpdateFlag() {
      this.$confirm('删除后将无法恢复，确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('updateFlag')
      }).catch(() => {})
    },
    // 拖拽排序前的数组
    onDragstart(item) {
      dragOldDataId = item.id
      // console.log('开始拖拽，', item)
    },
    // 拖拽排序后的数组
    onDragenter(item, e) {
      dragNewDataId = item.id
      e.preventDefault()
      // console.log('拖拽后，', item)
    },
    // 拖拽最后操作
    onDragend(item, e) {
      if (dragOldDataId === dragNewDataId) return

      const { sourceList } = this.$props
      const oldIndex = sourceList.findIndex(e => e.id === dragOldDataId)
      const newIndex = sourceList.findIndex(e => e.id === dragNewDataId)
      const copyArrList = JSON.parse(JSON.stringify(sourceList))
      const oldItem = sourceList[oldIndex]

      copyArrList.splice(oldIndex, 1)
      copyArrList.splice(newIndex, 0, oldItem)
      copyArrList.forEach((e, index) => {
        e.sort = index + 10
      })
      this.$emit('onSuccessSort', copyArrList)
    }
  }
}
</script>

<style lang="scss" scoped>

  .recharge-item {
    position: absolute;
    margin-bottom: 10px;
    background-color: #fff;
    width: 48%;
    border-radius: 8px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #FF9F70;
    p {
      line-height: normal;
    }
    .lapse-panel{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      opacity: 0.5;
      font-size: 28px;
      color: #fff;
      background-color: #000;
      border: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      z-index: 3;
    }
  }

  .recharge-item:nth-of-type(2n) {
    right: 0;
  }

  .recharge-item-index-3, .recharge-item-index-4 {
    top: 140px;
  }
  .recharge-item-index-5, .recharge-item-index-6 {
    top: 280px;
  }
  .recharge-item-index-7, .recharge-item-index-8 {
    top: 420px;
  }
  .recharge-item-index-9, .recharge-item-index-10 {
    top: 560px;
  }

  .recharge-item-red-1 {
    background-image: linear-gradient(to right, #FFB93F, #FF5D01);
    border: 1px solid #fff;
  }
  .recharge-item-red-2 {
    background-image: linear-gradient(to right, rgb(125,228,255), rgb(104,138,254));
    border: 1px solid #fff;
  }
  .recharge-item-red-3 {
    background-image: linear-gradient(to right, #FFBB65, #FF18E0);
    border: 1px solid #fff;
  }
  .recharge-item-red-4 {
    background-image: linear-gradient(to right, #FFB55A, #FF2980);
    border: 1px solid #fff;
  }

  .recharge-item-active {
    background-color: #b3b3b3;
  }

  .tag-panel {
    position: absolute;
    top: -6px;
    left: 0;
    padding-right: 10px;
    height: 30px;

    .tag-back {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 1;
    }

    .tag-small {
      position: relative;
      display: flex;
      align-items: center;
      margin-left: 8px;
      margin-top: 3px;
      z-index: 2;
    }
  }

  .vip-big-icon {
    position: absolute;
    width: 82px;
    height: 52px;
    bottom: 0;
    right: 0;
    z-index: 1;
  }

  .btn-panel {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
    position: absolute;
    right: 5px;
    bottom: 2px;
    z-index: 99;
    div:hover{
      cursor: pointer;
    }
  }

  .color-pick {
    color: #FF317E;
  }
  .color-fff {
    color: #ffffff !important;
  }

</style>
